light mode
night mode
অ্যাঙ্গুলার (Angular)
Angular পরিচিতি Angular কি? Angular এর ইতিহাস এবং সংস্করণ (AngularJS থেকে Angular 15 পর্যন্ত) Angular এর বৈশিষ্ট্য এবং সুবিধা ডেভেলপমেন্ট এনভায়রনমেন্ট সেটআপ Angular CLI ইনস্টল করা Angular এর স্থাপত্য Angular কম্পোনেন্ট মডিউল (NgModules) টেম্পলেট এবং ভিউ ডিরেক্টিভস সার্ভিস এবং ডিপেন্ডেন্সি ইনজেকশন রাউটিং এবং নেভিগেশন Angular কম্পোনেন্টস CLI দিয়ে কম্পোনেন্ট তৈরি করা কম্পোনেন্ট ডেকোরেটর কম্পোনেন্ট লাইফসাইকেল হুকস ডাটা বাইন্ডিং (ইন্টারপোলেশন, প্রোপার্টি বাইন্ডিং, ইভেন্ট বাইন্ডিং, টু-ওয়ে বাইন্ডিং) কম্পোনেন্টের টেম্পলেট এবং স্টাইলস Angular মডিউলস রুট মডিউল (AppModule) ফিচার মডিউলস শেয়ার্ড মডিউলস ল্যাজি লোডিং মডিউলস মডিউল অর্গানাইজেশন বেস্ট প্রাকটিসেস টেম্পলেট এবং ডিরেক্টিভস টেম্পলেট সিনট্যাক্স স্ট্রাকচারাল ডিরেক্টিভস (ngIf, ngFor, ngSwitch) অ্যাট্রিবিউট ডিরেক্টিভস (ngClass, ngStyle) কাস্টম ডিরেক্টিভ তৈরি করা Angular পাইপস পাইপ কি? বিল্ট-ইন পাইপস (DatePipe, UpperCasePipe ইত্যাদি) কাস্টম পাইপ তৈরি করা অ্যাসিঙ্ক পাইপ Angular ফর্মস টেম্পলেট-ড্রিভেন ফর্মস রিয়্যাক্টিভ ফর্মস ফর্ম ভ্যালিডেশন (বিল্ট-ইন এবং কাস্টম) Form Group এবং Form Controls ফর্ম সাবমিশন হ্যান্ডলিং রাউটিং এবং নেভিগেশন রাউট সেটআপ করা Router Module এবং Route Configuration Route Parameters এবং Query Parameters চাইল্ড রাউটস Lazy Loading Routes রাউট গার্ডস (CanActivate, CanDeactivate ইত্যাদি) রাউট রেজলভার সার্ভিস এবং ডিপেন্ডেন্সি ইনজেকশন সার্ভিস তৈরি এবং ব্যবহার Injectable ডেকোরেটর হায়ারার্কিক্যাল ডিপেন্ডেন্সি ইনজেকশন সিঙ্গেলটন সার্ভিসেস Angular এর HTTP ক্লায়েন্ট HttpClientModule পরিচিতি HTTP রিকোয়েস্ট (GET, POST, PUT, DELETE) করা HTTP রিকোয়েস্টে ত্রুটি হ্যান্ডলিং Angular এর Interceptors Observables এবং RxJS ব্যবহার RxJS এবং Observables RxJS কি? Observables, Operators, এবং Subjects কমন RxJS অপারেটরস (map, filter, mergeMap ইত্যাদি) অ্যাসিঙ্ক অপারেশন হ্যান্ডলিং RxJS তে ত্রুটি হ্যান্ডলিং কম্পোনেন্ট ইন্টারঅ্যাকশন Parent-Child কম্পোনেন্ট কমিউনিকেশন (Input, Output) ViewChild এবং ContentChild সার্ভিস-ভিত্তিক কমিউনিকেশন EventEmitter ব্যবহার Angular অ্যানিমেশনস অ্যানিমেশন এর বেসিক ধারণা অ্যানিমেশন তৈরি এবং কনফিগার করা অ্যানিমেশন ট্রিগার এবং স্টেট Keyframes এবং Transitions Angular রাউট গার্ডস রাউট গার্ড কি? গার্ডের প্রকারভেদ (CanActivate, CanDeactivate, Resolve ইত্যাদি) রাউট গার্ড ইমপ্লিমেন্ট করা Lazy Loading এর সাথে গার্ড ব্যবহার Angular টেস্টিং কম্পোনেন্ট ইউনিট টেস্টিং ডিপেন্ডেন্সি ইনজেকশন সহ সার্ভিস টেস্টিং Protractor দিয়ে End-to-End টেস্টিং ডিরেক্টিভ এবং পাইপ টেস্টিং HTTP রিকোয়েস্ট মকিং Angular CLI কমন Angular CLI কমান্ডস CLI দিয়ে কম্পোনেন্ট, সার্ভিস, মডিউল তৈরি Angular CLI Workspaces Angular অ্যাপ্লিকেশন বিল্ড এবং সার্ভ করা Angular Material Angular Material পরিচিতি Angular Material সেটআপ Material কম্পোনেন্টস (Buttons, Icons, Cards ইত্যাদি) Material Data Table Angular Material থিমিং Angular Flex Layout Flex Layout দিয়ে রেসপনসিভ লেআউট Grid ভিত্তিক লেআউট তৈরি Angular Flexbox ব্যবহার Angular ফর্মস এডভান্সড ডাইনামিক ফর্মস Reactive ফর্মে FormArray কাস্টম ভ্যালিডেটর বিল্ডিং এবং ডিপ্লয়মেন্ট প্রোডাকশনের জন্য অ্যাপ্লিকেশন বিল্ড করা Angular অ্যাপ্লিকেশন অপটিমাইজেশন Ahead-of-Time (AOT) কম্পাইলেশন Backend সার্ভিসের সাথে Angular (Node.js, Spring Boot) Firebase, Netlify, GitHub Pages ইত্যাদিতে অ্যাপ্লিকেশন ডিপ্লয় Angular এর এডভান্সড টপিকস Change Detection Strategy (OnPush vs Default) Web Workers এর সাথে Angular Angular Universal দিয়ে Server-Side Rendering State Management (NgRx) Performance Optimization Techniques

Firebase, Netlify, GitHub Pages ইত্যাদিতে অ্যাপ্লিকেশন ডিপ্লয়

Web Development - অ্যাঙ্গুলার (Angular) - বিল্ডিং এবং ডিপ্লয়মেন্ট |
3
3

Angular অ্যাপ্লিকেশন ডিপ্লয় করার জন্য বিভিন্ন ক্লাউড হোস্টিং এবং সার্ভিস রয়েছে, যেমন Firebase, Netlify, এবং GitHub Pages। এগুলো ব্যবহার করে আপনি সহজেই Angular অ্যাপ্লিকেশন হোস্ট এবং ডিপ্লয় করতে পারেন। এখানে আমরা দেখবো কিভাবে আপনি এই তিনটি প্ল্যাটফর্মে Angular অ্যাপ্লিকেশন ডিপ্লয় করবেন।

১. Firebase Hosting এ Angular অ্যাপ্লিকেশন ডিপ্লয়

Firebase একটি গুগল ক্লাউড বেসড সার্ভিস যা ওয়েব অ্যাপ্লিকেশন হোস্টিংয়ের জন্য সহজ এবং স্কেলেবল সমাধান প্রদান করে। Firebase Hosting সহজে Angular অ্যাপ্লিকেশন হোস্ট করতে ব্যবহৃত হয়।

Firebase Hosting-এ Angular অ্যাপ্লিকেশন ডিপ্লয় করার জন্য পদক্ষেপ:

  1. Firebase CLI ইনস্টল করা: Firebase CLI টুলটি ডেভেলপমেন্ট এনভায়রনমেন্টে ইনস্টল করতে হবে। কমান্ড লাইনে এটি ইনস্টল করতে:

    npm install -g firebase-tools
  2. Firebase প্রজেক্ট তৈরি করা: Firebase কনসোলে যান (https://console.firebase.google.com/), একটি নতুন প্রজেক্ট তৈরি করুন।

  3. Firebase CLI এ লগইন করা: Firebase অ্যাকাউন্টে লগইন করতে:

    firebase login

  4. Angular প্রজেক্ট বিল্ড করা: Angular প্রজেক্টটি বিল্ড করতে:

    ng build --prod

    এটি dist/ ফোল্ডারে প্রোডাকশন বিল্ড তৈরি করবে।

  5. Firebase Hosting কনফিগার করা: Firebase প্রজেক্টের জন্য Firebase CLI ব্যবহার করে কনফিগারেশন শুরু করুন:

    firebase init
    • Hosting অপশন সিলেক্ট করুন।
    • dist/ ফোল্ডার নির্বাচন করুন (যেটি Angular বিল্ডে তৈরি হয়েছে)।
    • Single-page অ্যাপ্লিকেশনের জন্য index.html ফাইলকে 404.html হিসেবে রিডিরেক্ট করতে "yes" সিলেক্ট করুন।

  6. অ্যাপ্লিকেশন ডিপ্লয় করা: Firebase Hosting-এ অ্যাপ্লিকেশন ডিপ্লয় করতে:

    firebase deploy

এখানে, Firebase আপনার অ্যাপ্লিকেশনকে হোস্ট করবে এবং আপনি একটি URL পাবেন যা দিয়ে অ্যাপ্লিকেশন অ্যাক্সেস করতে পারবেন।

২. Netlify তে Angular অ্যাপ্লিকেশন ডিপ্লয়

Netlify একটি জনপ্রিয় প্ল্যাটফর্ম যা Static Websites এবং JAMstack অ্যাপ্লিকেশন হোস্ট করতে ব্যবহৃত হয়। এটি Angular অ্যাপ্লিকেশন হোস্ট করার জন্য খুবই সহজ।

Netlify তে Angular অ্যাপ্লিকেশন ডিপ্লয় করার জন্য পদক্ষেপ:

  1. Netlify অ্যাকাউন্ট তৈরি করা: Netlify তে একটি অ্যাকাউন্ট তৈরি করুন বা আপনার গিটহাব বা গিটল্যাব অ্যাকাউন্ট দিয়ে লগইন করুন।

  2. Angular প্রজেক্ট বিল্ড করা: Angular অ্যাপ্লিকেশনটি প্রোডাকশন মোডে বিল্ড করুন:

    ng build --prod

    এটি dist/ ফোল্ডারে অ্যাপ্লিকেশন বিল্ড করবে।

  3. Netlify Dashboard-এ নতুন সাইট তৈরি করা: Netlify Dashboard-এ গিয়ে "New site from Git" অপশন সিলেক্ট করুন।
    • আপনার গিট রিপোজিটরি সিলেক্ট করুন।
    • সাইট সেটআপের সময় dist/ ফোল্ডারকে বিল্ড ডিরেক্টরি হিসেবে উল্লেখ করুন।
  4. অ্যাপ্লিকেশন ডিপ্লয় করা: Netlify অটোমেটিকভাবে আপনার অ্যাপ্লিকেশনকে ডিপ্লয় করবে এবং একটি URL প্রদান করবে। আপনি চাইলে কাস্টম ডোমেইনও সেটআপ করতে পারেন।

৩. GitHub Pages তে Angular অ্যাপ্লিকেশন ডিপ্লয়

GitHub Pages হলো একটি ফ্রি সার্ভিস যা GitHub রিপোজিটরি থেকে ওয়েবসাইট হোস্ট করতে ব্যবহৃত হয়। আপনি Angular অ্যাপ্লিকেশন GitHub Pages-এ ডিপ্লয় করতে পারেন।

GitHub Pages তে Angular অ্যাপ্লিকেশন ডিপ্লয় করার জন্য পদক্ষেপ:

  1. Angular প্রজেক্ট বিল্ড করা: Angular অ্যাপ্লিকেশন প্রোডাকশন মোডে বিল্ড করতে:

    ng build --prod --base-href="https://<username>.github.io/<repository-name>/"

    এখানে:

    • <username> হল আপনার GitHub ইউজারনেম।
    • <repository-name> হল আপনার রিপোজিটরির নাম।

    এটি dist/ ফোল্ডারে বিল্ড তৈরি করবে।

  2. GitHub রিপোজিটরি তৈরি করা: GitHub এ একটি নতুন রিপোজিটরি তৈরি করুন এবং Angular অ্যাপ্লিকেশনটি সেখানে পুশ করুন।

  3. GitHub Pages-এ ডিপ্লয় করা: GitHub Pages-এ অ্যাপ্লিকেশন ডিপ্লয় করতে angular-cli-ghpages টুলটি ব্যবহার করতে পারেন:

    • প্রথমে angular-cli-ghpages ইনস্টল করুন:

      npm install -g angular-cli-ghpages

    • এরপর angular-cli-ghpages দিয়ে ডিপ্লয় করুন:

      ngh --dir=dist/<project-name>

    এখানে <project-name> হল আপনার Angular প্রজেক্টের নাম যা dist/ ফোল্ডারে তৈরি হয়েছে।

  4. GitHub Pages URL: একবার ডিপ্লয় হয়ে গেলে, GitHub Pages URL এর মাধ্যমে আপনার অ্যাপ্লিকেশন অ্যাক্সেস করা যাবে, যা হবে:

    https://<username>.github.io/<repository-name>/

সারাংশ

এখন আপনি Firebase, Netlify, এবং GitHub Pages-এ Angular অ্যাপ্লিকেশন ডিপ্লয় করার প্রক্রিয়া জানেন। প্রতিটি প্ল্যাটফর্মের নিজস্ব সুবিধা এবং কনফিগারেশন রয়েছে, এবং এই তিনটি প্ল্যাটফর্মেই Angular অ্যাপ্লিকেশন ডিপ্লয় করা খুবই সহজ এবং কার্যকরী।

Content added By
Md Azizur Rahman

Read more

Firebase, Netlify, GitHub Pages ইত্যাদিতে অ্যাপ্লিকেশন ডিপ্লয়

or

Don't have an account? Register

Promotion